<template>
  <div>
    <el-row>
      <el-col :span="curSettingTips === '' ? 24 : 18">
        <b-code-editor
          v-model="jsonData"
          :auto-format="true"
          height="auto"
          theme="dracula" :indent-unit="2" ref="editor"></b-code-editor>

        <div v-if="curShowStyle" style="margin-top: 10px">
          <el-button type="primary" @click="onSwitchStyle1">默认样式</el-button>
<!--          <el-button type="success" @click="onSwitchStyle2">使用样式二</el-button>-->
        </div>
        <br>
        <el-button type="primary" @click="onSubumit">保 存</el-button>
        <el-button type="success" @click="copyContent">拷 贝</el-button>

      </el-col>
      <el-col :span="curSettingTips === '' ? 0 : 6">
        <div style="text-align: center;font-weight: bold;"><h3>配置说明</h3></div>
        <div style="margin-left: 10px" v-for="tips in curSettingTips">
        <div><span style="font-weight: bold">{{tips.label}}:</span><span>{{tips.tips}}</span></div>
        </div>
<!--        <div style="margin-left: 10px">{{curSettingTips}}</div>-->
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {copyTocontent} from "@/utils/index"

  export default {
    props: {
      jsonKey: {
        type: String
      },
      jsonStr: {
        type: String
      },
      settingTips: {
        type: Array,
        required: false
      },
      showStyle: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        jsonData: '',
        curKey: '',
        curSettingTips: '',
        curShowStyle: false,
        selStyle: null,
      }
    },
    created() {
      this.curSettingTips = this.settingTips;
      this.jsonData = this.jsonStr;
      if (this.jsonData == null) this.jsonData = '';
      this.curKey = this.jsonKey;
      this.curShowStyle = this.showStyle;
    },
    methods: {
      // 检测json格式
      isJSON(str) {
        if (typeof str == 'string') {
          try {
            var obj = JSON.parse(str);
            if (typeof obj == 'object' && obj) {
              return true;
            } else {
              return false;
            }

          } catch (e) {
            return false;
          }
        } else if (typeof str == 'object' && str) {
          return true;
        }
      },
      onSubumit() {

        // this.$set(this.jsonData, 'defaultValue', JSON.parse(str))
        if (!this.isJSON(this.jsonData)) {
          this.$message.error(`json格式错误`)
          return false
        }
        this.$message.success('json格式正确')
        this.$emit("jsonOk", this.curKey, this.jsonData)
      },
      copyContent() {
        // alert(this.jsonData);
        copyTocontent(this.jsonData);
        this.$message.success('json内容拷贝成功')
      },
      onSwitchStyle1() {
        this.$message.success('请注意！！！保存后方能生效！')
        this.jsonData = "{\"foot_content\":\"请大家注意车辆进场提示信息，按照排队叫号信息依次有序入场\",\"head_title\":\"车辆排队叫号信息看板\"}"
      },
      onSwitchStyle2() {
        this.$message.success('请注意！！！保存后方能生效！')
      },
    }
  }
</script>

<style>

</style>
